说说 script 标签中的 defer 和 async 异同点

async 百度统计

• 文档渲染-脚本一二加载结束分别立即执行（文档继续渲染），执行的过程中会阻止文档渲染，渲染完了立刻 DOMContentLoaded
• 阻止文档渲染，第二个脚本可能会在第一个脚本文件之前执行，加载完了立即执行
• 指定 async 属性的目的是不让页面等待两个脚本下载和执行

文档渲染：执行的时候阻挡文档渲染 脚本加载顺序：加载 1 后立即执行，加载 2 后立即执行

defer 代码高亮

• 文档渲染-下载脚本 1、2，脚本都下载完，一起立刻执行，执行完后，才执行 DOMContentLoaded 文档渲染：不阻挡 脚本加载顺序：加载后，需要等到 1、2 都加载完成，一起执行

普通

• 遇到 script 会阻止 dom 渲染，需要 script1\2 都加载并执行完了之后；没渲染完 dom 继续渲染，渲染完了执行 DOMContentLoaded

文档渲染：加载和执行都阻挡文档渲染 脚本加载顺序：1、2 都加载完毕之后，分别执行 1 和执行 2

defer async

js 会阻塞页面的渲染吗？说一下原因？

• 默认会阻，defer 加载执行都不会，async 加载不会阻，执行回阻塞
• 第三方脚本延迟引发白屏，此时就可以用 async

defer应用 代码高亮

• 其他多个脚本互相依赖
• 脚本依赖 dom 元素渲染完毕

async 百度统计

• 不关注文档是否渲染完毕
• 多个脚本之间没有关系，没有其他脚本产生的数据

下载-影响渲染的有

普通script

执行-影响渲染的有

普通script\async

JS 执行顺序

• async 谁先下载完就执行谁，互相没关系
• defer 谁在前先执行谁
• script 谁在前先执行谁